<template>
  <van-popup class="login_popup" v-model="$store.state.needLogin" duration="0.4"
             position="bottom">
    <div class="header">
      <Header title="登录" :isBack="false" @leftClick="leftClick"></Header>
    </div>
    <div class="content">
      <div class="logo"></div>
      <div class="login_form">
        <van-field label-width="30" v-model="user" label="文本"
                   placeholder="请输入您的登录用户" >
          <template #label>
            <span class="icon user"></span>
          </template>
        </van-field>
        <van-field label-width="30" v-model="pass" label="文本" type="password"
                   placeholder="请输入您的登录密码">
          <template #label>
            <span class="icon pass"></span>
          </template>
        </van-field>
      </div>
      <div class="login_submit">
        <van-button type="primary" size="large"
                    color="linear-gradient(to right, #20B1F2, #1393D3)"
                    @click="login"
        >登录</van-button>
      </div>
    </div>
  </van-popup>
</template>

<script>
import { Popup, Toast } from 'vant';
import { mapActions, mapState } from 'vuex';
import Header from './Header.vue';
import Config from '../libs/config';

export default {
  components: {
    [Popup.name]: Popup,
    [Toast.name]: Toast,
    Header
  },
  data() {
    return {
      user: '174521087902',
      pass: '111'
    };
  },
  computed: {
    ...mapState({
      router: (state) => state.routeData
    })
  },
  methods: {
    ...mapActions(['changeLoginState', 'changeNeedLogin', 'changeLoginUser']),
    login() {
      if (this.user.length < 1) {
        Toast({
          position: 'bottom',
          message: '请输入用户名'
        });
        return;
      }
      if (this.pass.length < 1) {
        Toast({
          position: 'bottom',
          message: '请输入密码'
        });
        return;
      }
      let nomoalUser = false;

      Config.userList.forEach((item) => {
        if (item.userId === this.user) {
          this.changeLoginUser(item);
          nomoalUser = true;
        }
      });
      if (nomoalUser) {
        this.changeLoginState(true);
        this.changeNeedLogin(false);
        this.$router.push(this.router);
      } else {
        Toast.fail('非法用户');
      }
    },
    leftClick() {
      this.changeNeedLogin(false);
    }
  }
};
</script>

<style lang="less">
.login_popup{
  position: absolute;
  top: 0;
  background: white;
  width: 100vw;
  z-index: 10;
  height: 100%;
  .content{
    width: 70%;
    margin-left: 15%;
    height: 60vh;
    margin-top: 10vh;
    .logo{
      padding-bottom: 5vh;
      margin-left: 15vw;
      width: 40vw;
      height: 10vh;
      background-size: 40vw 10vh;
      background-image: url('../assets/img/login/logo@2x.png');
      background-repeat: no-repeat;
    }
    .login_form {
      margin-top: 5vh;
      .icon {
        width: 1rem;
        height: 1rem;
        background-size: 1rem 1rem;
        display: inline-block;
        vertical-align: middle;
      }
      .user {
        background-image: url('../assets/img/login/account.png');
        background-repeat: no-repeat;
      }
      .pass {
        background-image: url('../assets/img/login/password@2x.png');
        background-repeat: no-repeat;
      }
    }
    .login_submit{
      margin-top: 5vh;
    }
  }
}
</style>
